<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>订单信息
        </b>
        <div class="u-right u-5mt">
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form
        :model="objForm"
        :rules="rules"
        ref="objForm"
        label-width="100px"
        class="u-form"
        style="max-width:1080px"
      >
        <el-form-item label="订单状态">
          <el-steps
            :space="220"
            :active="objForm.order_status"
            finish-status="success"
            align-center
            style="line-height: 1"
          >
            <el-step title="待付款" :description="objForm.create_date" style="padding:0"></el-step>
            <el-step title="已付款" :description="objForm.pay_date"></el-step>
            <el-step title="已发货" :description="objForm.send_date"></el-step>
            <el-step title="已收货" :description="objForm.take_date"></el-step>
            <el-step title="已完成" :description="objForm.end_date"></el-step>
          </el-steps>
        </el-form-item>
        <el-form-item label="商品信息">
          <template>
            <el-tag class="u-left tag">总金额：{{objForm.order_total}}</el-tag>
            <el-tag class="u-left tag">运费：{{objForm.freight_price}}</el-tag>
            <el-tag class="u-left tag">差价：{{objForm.difference_price}}</el-tag>
            <div class="u-right u-5mt">
              <el-button
                type="danger"
                size="small"
                @click="cancelOrder(objForm.id)"
                v-if="objForm.order_status==2||objForm.order_status==1"
              >取消订单</el-button>
              <el-button
                type="danger"
                size="small"
                @click="payOrder(objForm.id)"
                v-if="objForm.order_status==1"
              >后台付款</el-button>
              <el-button
                type="danger"
                size="small"
                @click="setOrderPrice()"
                v-if="objForm.order_status==1"
              >修改金额</el-button>
              <el-button
                type="danger"
                size="small"
                @click="setLogistics()"
                v-if="objForm.order_status==2"
              >一键发货</el-button>
              <el-button
                type="success"
                size="small"
                @click="setParastatus()"
                v-if="objForm.order_status==1"
              >确认收款</el-button>
              <el-button
                type="danger"
                size="small"
                @click="showLogistics(objForm.id)"
                v-if="objForm.order_status>=2"
              >查看物流</el-button>
              <el-button
                type="danger"
                size="small"
                @click="openOrderAddress()"
                v-if="objForm.order_status>0&&objForm.order_status<=3"
              >修改收货地址</el-button>
            </div>
            <el-table :data="objForm.order_items" stripe style="width: 100%">
              <el-table-column prop="goods_title" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="attribute_names" label="商品规格" width="180"></el-table-column>
              <el-table-column label="商品封面" width="180">
                <template slot-scope="scope">
                  <el-image
                    style="max-width: 60px;"
                    :src="scope.row.goods_img"
                    :data-src="scope.row.goods_img"
                    fit="cover"
                    lazy
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column prop="goods_number" label="数量"></el-table-column>
              <el-table-column prop="platform_price" label="出货价"></el-table-column>
              <el-table-column prop="cost_price" label="成本价"></el-table-column>
              <el-table-column prop="order_total" label="市场价"></el-table-column>
              <el-table-column label="归属">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.goods_source=='system'" type="success">平台</el-tag>
                  <el-tag v-else type="info">群主</el-tag>
                  <br />
                </template>
              </el-table-column>
              <el-table-column label="是否申请退款">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.out_handle_status==1" type="success">申请退款中</el-tag>
                  <el-tag v-if="scope.row.out_handle_status==2" type="info">拒绝退款</el-tag>
                  <el-tag v-if="scope.row.out_handle_status==3" type="info">同意退款</el-tag>
                  <el-tag v-if="scope.row.out_handle_status==4" type="info">退货中</el-tag>
                  <el-tag v-if="scope.row.out_handle_status==5" type="info">退款完成</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input
            type="textarea"
            :rows="4"
            :value="objForm.take_name+'\n'+objForm.take_phone+'\n'+objForm.take_address"
          ></el-input>
        </el-form-item>
        <el-form-item label="群主" v-if="objForm.agency_name">
          <el-tag type="info">{{objForm.agency_name}}</el-tag>
        </el-form-item>
        <el-form-item label="购买用户">
          <el-tag type="info">{{objForm.nick_name}}</el-tag>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-tag type="info">{{objForm.order_sn}}</el-tag>
        </el-form-item>
        <el-form-item label="付款编号">
          <el-tag type="info">{{objForm.pay_sn}}</el-tag>
        </el-form-item>
        <el-form-item label="是否团购">
          <el-tag type="success" v-if="objForm.goods_type>0">是 | 拼团订单号:{{objForm.goods_group}}</el-tag>
          <el-tag type="info" v-else>否</el-tag>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog title="填写物流信息" :visible.sync="is_logistics_show" width="60%">
      <el-form :model="objForm" label-width="80px">
        <el-table
          :data="goodsData"
          @selection-change="handleSelectionChange"
          class="u-mt-10"
          v-viewer
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="id" prop="id" width="50"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <el-image
                style="max-width: 50px;"
                :src="scope.row.goods_img"
                :data-src="scope.row.goods_img"
                fit="cover"
                lazy
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="goods_title"></el-table-column>
          <el-table-column label="商品规格" prop="attribute_names"></el-table-column>
          <el-table-column label="中数量" prop="goods_number"></el-table-column>
          <el-table-column label="已发货" prop="send_number"></el-table-column>
          <el-table-column label="未发货" prop="need_number"></el-table-column>
          <el-table-column label="发货数">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.now_send_number"
                :max="scope.row.need_number"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="快递名称" style="margin-top: 30px">
          <el-select v-model="code" placeholder="请选择快递名称">
            <el-option label="请选择" value="0"></el-option>
            <el-option
              v-for="(item) in logistics"
              :key="item.id"
              :label="item.logistics_name"
              :value="item.logistics_code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运单号">
          <el-col :span="11">
            <el-input v-model="number" type="text" placeholder="请输入运单号"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-col :span="11">
            <el-input type="textarea" v-model="remark"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_logistics_show = false">取 消</el-button>
        <el-button type="primary" @click="submitLogistics()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="物流信息" :visible.sync="is_logistics_log_show" width="60%">
      <Logistics
        :list="logistics_log.list"
        :traces="logistics_log.traces"
        @tabchange="getLogisticsTraces"
      ></Logistics>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_logistics_log_show=false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改金额" :visible.sync="is_set_price_show" width="700px">
      <el-form :model="orderPrice" label-width="100px">
        <el-form-item label="运费">
          <el-input v-model="orderPrice.freight" type="text" placeholder="请输入实际运费"></el-input>
        </el-form-item>
        <el-form-item label="订单差价">
          <el-input v-model="orderPrice.difference" type="text" placeholder="大于0表示多收取,小于0表示退还">
            <template slot="append">大于0表示多收取,小于0表示退还</template>
          </el-input>
        </el-form-item>
        <el-form-item label="订单实际成本">
          <el-input v-model="orderPrice.cost" type="text" placeholder="请输入订单实际成本"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_set_price_show = false">取 消</el-button>
        <el-button type="primary" @click="submitPrice()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="收款金额" :visible.sync="parastatus" width="400px">
      <el-form :model="objForm" label-width="80px">
        <el-form-item label="收款金额">
          <el-input v-model="actual_price" type="text" placeholder="请输入收款金额"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="parastatus=false">取 消</el-button>
        <el-button type="primary" @click="submitPara()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改收货地址" :visible.sync="is_set_address_show" width="600px">
      <el-form :model="addressData" label-width="80px">
        <el-form-item label="收货人">
          <el-input v-model="addressData.name" type="text" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="收货电话">
          <el-input v-model="addressData.phone" type="text" placeholder="请输入收货电话"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="addressData.address" type="text" placeholder="请输入收货地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_set_address_show = false">取 消</el-button>
        <el-button type="primary" @click="submitAddress()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Logistics from "@/components/logistics/logistics";
// import Myselet from "@/components/myselet/myselet";
export default {
  components: {
    Logistics,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "order",
      backRoute: "orderIndex", //成功跳转地址
      objForm: {
        id: "",
      },
      addressData: {
        //修改收货地址
        id: "",
        phone: "",
        name: "",
        address: "",
      },
      orderPrice: {
        freight: 0, //运费
        difference: 0, //补差价
        cost: 0, //实际成本
      }, //修改金额
      goodsData: [],
      logistics: [],
      logistics_log: {},
      is_logistics_show: false,
      is_logistics_log_show: false,
      is_set_price_show: false,
      is_set_address_show: false,
      parastatus: false,
      actual_price: 0, //
      send_type: "0",
      item_id: [],
      item_number: [],
      code: "",
      number: "",
      remark: "",
    };
  },
  methods: {
    submitUpdate() {
      let item_number_temp = [];
      let item_id_temp = [];
      this.goodsData.forEach((item) => {
        if (item.select) {
          item_id_temp.push(item.id);
          item_number_temp.push(item.now_send_number);
        }
      });
      this.item_id = item_id_temp;
      this.item_number = item_number_temp;
    },
    handleSelectionChange(e) {
      let self = this;
      if (self.goodsData) {
        self.goodsData.forEach((itemx, index) => {
          self.goodsData[index].select = false;
          if (e) {
            e.forEach((item) => {
              if (itemx.id == item.id) {
                self.goodsData[index].select = true;
              }
            });
          }
        });
      }
    },
    openOrderAddress() {
      //修改收货地址
      this.is_set_address_show = true;
      this.addressData.id = this.objForm.id;
      this.addressData.phone = this.objForm.take_phone;
      this.addressData.name = this.objForm.take_name;
      this.addressData.address = this.objForm.take_address;
    },
    submitAddress() {
      this.is_set_address_show = false;
      let self = this;
      self.$api[self.apiName].setAddress(self.addressData).then((response) => {
        if (response.code == 1) {
          self.getInfo();
        }
      });
    },
    setOrderPrice() {
      this.is_set_price_show = true;
    },
    submitPrice() {
      this.is_set_price_show = false;
      let self = this;
      let json = {
        id: this.objForm.id,
        price: this.orderPrice,
      };
      self.$api[self.apiName].setOrderPrice(json).then((response) => {
        if (response.code == 1) {
          self.getInfo();
        }
      });
    },
    // 确认收款
    setParastatus() {
      this.parastatus = true;
      this.actual_price = parseFloat(this.objForm.order_total);
    },
    // 实际收款金额
    submitPara() {
      let self = this;
      let form = {
        order_id: this.objForm.id,
        actual_price: this.actual_price,
      };
      self.$api[self.apiName].setPayOrder(form).then((response) => {
        if (response.code == 1) {
          this.parastatus = false;
          this.$message({
            message: response.msg,
            type: "success",
          });
          self.getPageData();
        }
      });
    },
    payOrder(id) {
      let self = this;
      this.$confirm("确定要后台付款吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.$api[self.apiName].payOrder(id).then((response) => {
            if (response.code == 1) {
              self.getInfo();
            }
          });
        })
        .catch(() => {});
    },
    cancelOrder(id) {
      let self = this;
      this.$confirm("确定要取消订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.$api[self.apiName].cancelOrder(id).then((response) => {
            if (response.code == 1) {
              self.$router.go(-1);
            } else {
              self.$router.go(-1);
            }
          });
        })
        .catch(() => {});
    },
    confirmTake(id) {
      let self = this;
      this.$confirm("确定要确认收货吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.$api[self.apiName].confirmTake(id).then((response) => {
            if (response.code == 1) {
              self.getInfo();
            }
          });
        })
        .catch(() => {});
    },
    submitLogistics() {
      this.submitUpdate();
      let form = {
        order_id: this.objForm.id,
        item_id: this.item_id.join(","),
        item_number: this.item_number.join(","),
        code: this.code,
        number: this.number,
        remark: this.remark,
      };
      let self = this;
      self.$api[self.apiName].saveLogistics(form).then((response) => {
        if (response.code == 1) {
          self.is_logistics_show = false;
          self.item_id = [];
          self.item_number = [];
          self.code = "";
          self.number = "";
          self.remark = "";
          self.getInfo();
          self.getItemsInfo();
        }
      });
    },
    getLogisticsTraces(id) {
      let self = this;
      var json = {
        logistics_id: id,
      };
      self.$api[self.apiName].logisticsLog(json).then((response) => {
        if (response.code == 1) {
          self.logistics_log.traces = response.data.traces;
        }
      });
    },
    showLogistics(id) {
      let self = this;
      var json = {
        id: id,
      };
      self.$api[self.apiName].logisticsLog(json).then((response) => {
        if (response.code == 1) {
          self.logistics_log = response.data;
          self.is_logistics_log_show = true;
        }
      });
    },
    setLogistics() {
      this.is_logistics_show = true;
    },
    getLogisticsAll() {
      let self = this;
      if (self.logistics.length <= 0) {
        self.$api[self.apiName].logisticsAll().then((response) => {
          if (response.code == 1) {
            self.logistics = response.data;
          }
        });
      }
    },
    getItemsInfo() {
      let self = this;
      var josn = {
        id: self.objForm.id,
        type: "system",
      };
      self.$api[self.apiName].getItemsInfo(josn).then((response) => {
        if (response.code == 1) {
          self.goodsData = response.data;
        }
      });
    },
    afterGetInfo() {
      this.getLogisticsAll();
      this.getItemsInfo();
      this.orderPrice.freight = this.objForm.freight_price; //运费
      this.orderPrice.difference = this.objForm.difference_price; //补差价
      this.orderPrice.cost = this.objForm.cost_price; //实际成本
    },
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  },
};
</script>
<style>
.el-step__title {
  font-size: 16px;
}

.el-step__description {
  font-size: 15px;
}

.el-step.is-center .el-step__description {
  padding: 0;
  text-align: center;
}

.el-step__description.is-success {
  color: #666;
}
.tag {
  margin-left: 20px;
}
</style>
